<template lang="pug">
div
  PageHeader(pageTitle="修改密码")
  g-v(a-i="center")
    input.input.old(
        placeholder="原密码"
        type="password"
        v-model="oldPwd"
        )
    input.input.new(
        placeholder="新密码"
        type="password"
        v-model="newPwd"
        )
    input.input.new-test(
        placeholder="确认新密码"
        type="password"
        v-model="newPwdTest"
        )

    div.button(@click="modifyPassword") 确定
</template>

<script>
import api from "$api"
import util from "$util"

export default {
  data() {
    return {
      isLoading: false,

      loading: {
        modifyPassword: false,
      },

      oldPwd: "",
      newPwd: "",
      newPwdTest: "",
    }
  },

  methods: {
    async modifyPassword() {
      if (this.loading.modifyPassword) {
        return
      }
      if (this.oldPwd === "") {
        util.Alert("原密码为空")
        return
      }
      if (this.newPwd === "") {
        util.Alert("新密码为空")
        return
      }
      if (this.newPwdTest === "") {
        util.Alert("确认的新密码为空")
        return
      }

      if (this.newPwd === this.oldPwd) {
        util.Alert("新密码与原密码相同")
        return
      }
      if (this.newPwd !== this.newPwdTest) {
        util.Alert("两次输入的新密码不一致")
        return
      }

      this.loading.modifyPassword = true
      try {
        await api.ModifyPassword({
          oldPassword: this.oldPwd,
          newPassword: this.newPwd,
        })
        util.Alert("密码修改成功")
        this.$root.Back()
      } catch(err) {
        this.$root.error(err)
      } finally {
        this.isLoading = false
        this.loading.modifyPassword = false
      }
    },
  },
}
</script>

<style lang="stylus" scoped>

.input
  width: 90%
  padding: 0.5rem
  text-indent: 0.5rem
  background: grey100
  &&::placeholder
    color: grey700

.old
  margin-top: 1rem
  margin-bottom: 1rem
  border-radius: 0.3rem
  border: 1px solid grey500

.new
  border-radius: 0.3rem 0.3rem 0 0
  border-top: 1px solid grey500
  border-right: 1px solid grey500
  border-left: 1px solid grey500

.new-test
  padding-top: calc(0.5rem + 1px)
  border-radius: 0 0 0.3rem 0.3rem
  border: 1px solid grey500

.button
  display: flex
  justify-content: center
  background: grey700
  color: white
  padding: 0.5rem
  width: 90%
  border-radius: 0.3rem
  margin-top: 2rem

</style>
